<template>
  <view class="login-container">
    <view class="login-header">
      <image class="logo" src="/static/images/MEISHEN.png" mode="aspectFit"></image>
      <view class="title">美申智控系统</view>
      <view class="subtitle">便携式厕所物联网管理平台</view>
    </view>
    
    <view class="login-form">
      <view class="form-item">
        <input
          v-model="form.username"
          placeholder="请输入用户名"
          type="text"
          class="input"
          :disabled="loading"
        />
      </view>
      
      <view class="form-item">
        <input
          v-model="form.password"
          placeholder="请输入密码"
          type="password"
          class="input"
          :disabled="loading"
        />
      </view>

      <view class="form-item remember-me">
        <checkbox-group @change="(e) => form.rememberMe = e.detail.value.length > 0">
          <label class="checkbox-label">
            <checkbox :checked="form.rememberMe" :disabled="loading" />
            <text>记住我</text>
          </label>
        </checkbox-group>
      </view>
      
      <view class="form-actions">
        <button
          @click="handleLogin"
          :disabled="loading || !canSubmit"
          class="btn btn-primary btn-block"
          :class="{ 'btn-disabled': loading || !canSubmit }"
        >
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </view>
    </view>
    
    <view class="login-footer">
      <view class="version">版本 1.0.0</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/src/store/user'

// 用户存储
const userStore = useUserStore()

// 表单数据
const form = ref({
  username: '',
  password: '',
  rememberMe: false
})

const loading = ref(false)

// 是否可以提交
const canSubmit = computed(() => {
  return form.value.username.trim() !== '' && form.value.password.trim() !== ''
})

// 登录处理
const handleLogin = async () => {
  if (loading.value || !canSubmit.value) return

  try {
    loading.value = true

    // 调用登录API
    const success = await userStore.login(form.value)

    if (success) {
      // 显示成功消息
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })

      // 延迟跳转，让用户看到成功提示
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }, 1000)
    }

  } catch (error: any) {
    // 显示错误消息
    uni.showToast({
      title: error.message || '登录失败',
      icon: 'none'
    })
    console.error('登录失败:', error)
  } finally {
    loading.value = false
  }
}

// 页面加载
onLoad(() => {
  // 检查是否已登录
  if (userStore.isAuthenticated) {
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 50%, #95de64 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60rpx 40rpx;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  }
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
  position: relative;
  z-index: 1;

  .logo {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    background: rgba(255, 255, 255, 0.95);
    padding: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  }

  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  }

  .subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
  }
}

.login-form {
  width: 100%;
  max-width: 640rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10rpx);

  .form-item {
    margin-bottom: 32rpx;

    .input {
      width: 100%;
      height: 88rpx;
      padding: 0 24rpx;
      border: 1rpx solid #e8e8e8;
      border-radius: 12rpx;
      font-size: 32rpx;
      background: #fafafa;
      transition: all 0.3s ease;

      &:focus {
        border-color: #52c41a;
        background: #ffffff;
        box-shadow: 0 0 0 4rpx rgba(82, 196, 26, 0.1);
      }
    }

    &.remember-me {
      margin-bottom: 20rpx;

      .checkbox-label {
        display: flex;
        align-items: center;
        gap: 12rpx;
        font-size: 28rpx;
        color: #666;
        cursor: pointer;

        checkbox {
          transform: scale(0.8);
        }
      }
    }
  }

  .form-actions {
    margin-top: 40rpx;

    .btn {
      height: 88rpx;
      font-size: 32rpx;
      border-radius: 12rpx;
      width: 100%;
      background: linear-gradient(135deg, #52c41a, #73d13d);
      color: white;
      border: none;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.4);
      }

      &.btn-disabled {
        background: #ccc;
        box-shadow: none;
        transform: none;
      }
    }
  }
}

.login-footer {
  margin-top: 60rpx;
  text-align: center;
  position: relative;
  z-index: 1;

  .version {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
  }
}
</style>